import React, { useState } from 'react'
import { Table, Input } from 'antd'
import ItemModal from '~/components/item-modal'

import { InfoCircleOutlined } from '@ant-design/icons'
import { FlexCenterd } from '~/styles/commonstyle'
import { handleUpdateRemark } from '~/api/accept-property-api'
import { ColumnProps } from 'antd/lib/table'
import { SelectDataContent, SelectItemContent } from '../../styled'

let cacheRecord: any = {}

const colums = ({ setModalVisible }: any): ColumnProps<any>[] => [
  {
    title: '序号',
    dataIndex: 'id',
    align: 'center',
    render: (_: any, record: any, index: number) => <div>{index + 1}</div>
  },
  {
    title: '物品编号',
    dataIndex: 'serialNo',
    align: 'center',
    render: (serialNo: any, record: any) => (
      <a
        onClick={() => {
          cacheRecord = record
          setModalVisible(true)
        }}
      >
        {serialNo}
      </a>
    )
  },
  {
    title: '物品名称',
    dataIndex: 'itemName',
    align: 'center',
    render: (itemName: any, record: any) => (
      <a
        onClick={() => {
          cacheRecord = record
          setModalVisible(true)
        }}
      >
        {itemName}
      </a>
    )
  },
  {
    title: '数量（单位）',
    dataIndex: 'itemStock',
    align: 'center',
    render: (itemName: any, record: any) => (
      <div>
        {record.itemStock.totalNumber} ({record.itemStock.unitName})
      </div>
    )
  },
  {
    title: '规格',
    dataIndex: 'specs',
    key: 'specs',
    align: 'center'
  },
  {
    title: '特征',
    dataIndex: 'feature',
    align: 'center',
    key: 'feature'
  },
  {
    title: '实物所在地',
    dataIndex: 'location',
    key: 'location',
    align: 'center',
    fixed: 'right'
  },
  {
    title: '库架编号',
    dataIndex: 'age7',
    key: 'age',
    align: 'center',
    fixed: 'right'
  },
  {
    title: '存放地',
    dataIndex: 'age8',
    key: 'age',
    align: 'center',
    fixed: 'right'
  },
  {
    title: '备注(可修改)',
    dataIndex: 'remark',
    key: 'remark',
    fixed: 'right',
    align: 'center',
    render: (remark: any, record: any) => (
      <Input
        onBlur={async e => {
          await handleUpdateRemark({
            remark: e.target.value,
            serialNo: record.serialNo
          })
        }}
        defaultValue={remark}
      />
    )
  }
]

const rowSelection = (setSelectItems: any) => {
  return {
    onChange: (seletRowKeys: any) => {
      setSelectItems(seletRowKeys)
    }
  }
}
const WaitingList = ({ caseItmes, setSelectItems, selectItmes }: any) => {
  const [modalVisible, setModalVisible] = useState(false)

  return (
    <div>
      <SelectDataContent>
        <FlexCenterd>
          <InfoCircleOutlined style={{ fontSize: 14, color: '#3370da' }} />
          <SelectItemContent>
            <label>已选择：</label>
            <span>{selectItmes.length}</span>
          </SelectItemContent>
          <SelectItemContent>
            <label>筛选结果：</label>
            <span>{caseItmes.length}</span>
          </SelectItemContent>
        </FlexCenterd>
      </SelectDataContent>
      <Table
        pagination={{
          size: 'default',
          total: caseItmes.length,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }}
        rowSelection={rowSelection(setSelectItems)}
        rowKey="serialNo"
        dataSource={caseItmes}
        columns={colums({ setModalVisible })}
        bordered
      />
      <ItemModal visible={modalVisible} setVisible={setModalVisible} record={cacheRecord} />
    </div>
  )
}

export default WaitingList
